<template>
    <div>
        computed和watch在composition api下使用
    </div>
    <h2>计算属性, 原始值：{{count}}, 计算后：{{plusOne}}</h2>
    <div>
        watch: {{state.count}} <el-button @click="updateCount">更新state.count的值</el-button>
    </div>
</template>

<script>
import { ref, computed, reactive, watch } from 'vue'
export default {
    setup () {
        const count = ref(1)
        const plusOne = computed(() => count.value + 1)

        const state = reactive({ count: 0 })
        const updateCount = () => {
            const random = Math.floor(Math.random() * 10 + 1)
            state.count = random
        }
        watch(
            () => state.count, 
            (count, prevCount) => {
                console.log('执行watch,当前值：', count)
            },
            {
                immediate: true
            }
        )
        return {
            count,
            plusOne,
            state,
            updateCount
        }
    }
}
</script>

<style lang="scss" scoped>

</style>